// 定义一个全局的处理图片失效的自定义指令
// Vue.directive('指令名', {指令的钩子函数 })

export const imgerror = {
  // 会在当前指令所在的元素，被inserted到组件或者页面中时触发 （可以开始操作节点
  inserted(el, binding) {
    // el =》 指令所在的元素
  // binding =》 里面是指令相关的信息对象， binding.value 指令的值
  // console.log(el, binding.value )
    // 如果图片加载失败，就用备用图片地址
    // Image.onerror 图片加载失败时触发
    el.onerror = () => {
      // 图片加载失败，替换src 即可
      el.src = binding.value || 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=221521724,481371925&fm=26&gp=0.jpg'
    }
  }
}

// 定义一个全局的修改文字的自定义指令
// v-color="颜色值"
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}
